import React, { useRef } from "react";
import { Input, Form, Button } from "antd";
import axios from "axios";

const Modify = () => {
  const [form] = Form.useForm();
  const userID = parseInt(localStorage.getItem("id"));

  handleChangeMessage = () => {

    axios.post(`http://192.168.61.84:8086/v1/user/updateuser`,{
      user_id: userID, // 使用 ref 获取 userID
      user_name: form.getFieldsValue().userName,
      phone: form.getFieldsValue().phone,
    }
  )
  };

  return (
    <div>
      <Form form={form}>
          <div className="form-wrapper">
            当前用户ID: <span>{userId}</span> {/* 使用 ref 显示 userID */}
            <Form.Item
              label="用户名"
              name="userName"
              rules={[
                {
                  required: true,
                  message: "请输入修改用户名!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="手机号"
              name="phone"
              rules={[
                {
                  required: true,
                  message: "请输入修改手机号！",
                },
              ]}
            >
              <Input />
            </Form.Item>
            
            <Button type="primary" onClick={handleChangeMessage}  style={{ marginRight: 10, width: 80 }}>
              提交修改
            </Button>
            
          </div>
        </Form>
    </div>
  );
};

export default Modify;
